import React, { Component } from "react";
import { Card, Form, Input, Button, Select, Upload, message } from "antd";
import { UploadOutlined } from "@ant-design/icons";
import { fetchCateList, getArtById, updateArt } from "api";
import E from "wangeditor";
const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
};
const tailLayout = {
  wrapperCol: { offset: 4, span: 20 },
};

export default class ArtAdd extends Component {
  constructor() {
    super();
    this.state = {
      thumb: "",
      cates: [],
      editor: null,
      art:{}
    };
  }
  render() {
    let _this = this;
    const props = {
      name: "file",
      action: "https://www.mocky.io/v2/5cc8019d300000980a055e76",
      headers: {
        authorization: "authorization-text",
      },
      onChange(info) {
        if (info.file.status === "done") {
          message.success(`${info.file.name} 上传成功`);
          console.log(info);
          _this.setState({
            thumb: info.file.response.thumbUrl,
          });
        } else if (info.file.status === "error") {
          message.error(`${info.file.name} 上传失败`);
        }
      },
    };
    return (
      <div>
        <Card title="编辑文章">
          {
            this.state.art.title
            &&
            <Form 
              {...layout} name="basic" 
              onFinish={this.submitForm}
              initialValues = { this.state.art }
              // 初始值
          >
            <Form.Item
              label="文章标题"
              name="title"
              rules={[{ required: true, message: "请输入文章标题!" }]}
            >
              <Input/>
            </Form.Item>

            <Form.Item
              label="作者"
              name="author"
              rules={[{ required: true, message: "请填写作者!" }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              name="artCate"
              label="所属分类"
              rules={[{ required: true }]}
            >
              <Select placeholder="请选择一个分类" allowClear>
                {this.state.cates.map((cate) => {
                  return (
                    <Select.Option  key={cate.id} value={cate.id}>
                      {cate.cateName}
                    </Select.Option>
                  );
                })}
              </Select>
            </Form.Item>
            <Form.Item label="文章封面">
              <Upload {...props}>
                <Button icon={<UploadOutlined />}>Click to Upload</Button>
              </Upload>
            </Form.Item>
            <Form.Item
              label="描述"
              name="desc"
              rules={[{ required: true, message: "请输入简介!" }]}
            >
              <Input.TextArea />
            </Form.Item>

            <Form.Item label="内容" name="content">
              <div id="content" />
            </Form.Item>
            <Form.Item {...tailLayout}>
              <Button type="primary" htmlType="submit">
                添加
              </Button>
            </Form.Item>
          </Form>
          }
        </Card>
      </div>
    );
  }
  componentDidMount() {
    this.fetchCateList();
    this.getArt();
  }
  // 初始化富文本
  initEditor= ()=>{
    // 创建富文本编辑器
    const editor = new E("#content");
    editor.config.zIndex = 500
    editor.create();
    // 设置富文本初始值
    editor.txt.html(this.state.art.content);
    this.setState({
      editor,
    });
  }
  fetchCateList = () => {
    // 获取所有分类数据
    fetchCateList().then((res) => {
      if (res.data.code === 200) {
        this.setState({
          cates: res.data.data,
        });
      }
    });
  };
  getArt =() =>{
    // 获取编辑的文章初始值
    getArtById(this.props.match.params.artId).then(res=>{
      if(res.data.code === 200){
        this.setState({
          art: res.data.data
        },()=>{
          this.initEditor()
        })
      }
    })
  }
  submitForm = (value) => {
    // 提交表单数据
    const params = {
      ...value,
      thumb:this.state.thumb,
      content:this.state.editor.txt.html(),
      id: this.state.art.id
    }
    updateArt(params).then(res=>{
      if(res.data.code === 200){
        
        message.success(res.data.msg,2,()=>{
          this.props.history.push('/admin/artList')
        })
      }else{
        message.error(res.data.msg,2,()=>{
          this.props.history.go(0)
        })
      }
    })

  };
}
